<template>
  <div>
    <el-container>
      <el-header class="homeHeader">
        <h3>东软云医院HIS系统</h3>

        <el-dropdown>
          <span class="el-dropdown-link">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>隐藏菜单</el-dropdown-item>
            <el-dropdown-item divided>用户退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu router>
            <el-submenu :index="i+''" v-for="(item,i) in this.$router.options.routes" v-if="!item.hidden">
              <template slot="title">
                <span>{{item.meta.title}}</span>
              </template>
              <el-menu-item :index="child.path" v-for="(child,j) in item.children" @click="initTabs(child)">
                <span slot="title">{{child.meta.title}}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>

          <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit" @tab-click="tabChange">
            <el-tab-pane
                    :key="item.name"
                    v-for="(item, index) in editableTabs"
                    :label="item.title"
                    :name="item.name"
                    :path="item.path"
            >
              {{item.content}}
            </el-tab-pane>
          </el-tabs>

          <router-view/>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name:'Home',
    data(){
      return{
        editableTabsValue:'1',
        editableTabs:[],
        tabIndex:1
      }
    },
    methods:{
      /*点击关闭标签*/
      handleTabsEdit(targetName, action) {
        if (action === 'remove') {
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                  this.$router.replace(nextTab.path);
                }
              }
            });
          }

          this.editableTabsValue = activeName;
          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
      },
      /*点击二级菜单，初始化选项卡*/
      initTabs(child){
        let onOff = true;
        this.editableTabs.forEach((item,i)=>{
          if(item.name==child.meta.title){
            this.editableTabsValue = child.meta.title;
            onOff = false;
          }
        })
        if(onOff){
          let tab = {
            title:child.meta.title,
            name:child.meta.title,
            path:this.$route.path
          }
          this.editableTabs.push(tab);
          this.editableTabsValue = child.meta.title;
        }
      },
      /*点击选项卡，更改内容*/
      tabChange(tab){
        this.$router.replace(tab.$attrs.path);
      }
    }
  }
</script>

<style scoped>
  .homeHeader{
    background-color: #409EFF;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #fff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
